這篇筆記主要整理自此部 2022/5 YT 影片：TypeScript Tutorial for Beginners - Programming with Mosh

＊以下 TypeScript 簡稱 TS
＊以下使用的 editor 為 VScode
＊VScode 裡跳的錯誤提示（毛毛蟲）這裡簡稱「跳錯」

🌿 各種 Types & 相關名詞（七～十三）

一～六在這裡

七、Type aliases

• 創造客製化的 type

• 使用 Type aliases 可以解決什麼問題？
  前一篇在介紹 objects 時，寫了這個範例：

  let employee: {
    id: number; 
    name: string;
  } = { id: 1, name: "Kim" };
  

  1. 試想如果有超多跟 employee 類似的物件要創建，那 annotation 可能會一直重複...（not DRY)
  2. 而且可能在重複撰寫的時候寫錯，導致有物件長得不一樣
  3. 如果物件的 properties 一多，不易閱讀

  以上三個問題 type aliases 可以解決！

• 範例

  // 寫好 type aliases
  type Employee = {
    id: number;
    name: string;
  };
  
  // 下面註釋時就可以用型別別名，簡潔多了還可以重複用！
  let employee1: Employee = { id: 1, name: "Kim" };
  let employee2: Employee = { id: 1, name: "Kate" };
  

八、Unions

• Unions 是聯集，代表該變數可以是我們寫的型別的其中一種
• 語法：寫一個 |，很像 or 的概念
• 範例：
  
  • 上方程式碼在呼叫函式的時候可以帶入 number 或 string 都不會跳錯
  • 在函式裡面使用參數，因為不確定是哪一個型別，所以跳出來的可用 methods or properties 會是註釋的型別都能用的

九、Type Narrowing

承接上方的 code，使用 if/else 來過濾型別：

上方的 if block 中 TS 可以推斷出那個參數是 number，下方就是剩下的 string（跳出來的可用 methods or properties 也會隨之改變），這樣的行為就叫 type Narrowing

十、Intersection

• Intersection 則像是交集，代表某個變數要同時符合兩種型別（聽起來好像不可能，一個變數要同時是 string 又是 number ？？？這確實不可能，請看範例）
• 語法：寫一個 &，很像 and 的概念
• 範例：

  type Draggable = {
    drag: () => void;
  };
  
  type Resizable = {
    resize: () => void;
  };
  
  // 此處使用 intersection，代表新的 type UIWidget 要同時符合右邊兩個
  type UIWidget = Draggable & Resizable;
  
  const textBox: UIWidget = {
    drag: () => {},
    resize: () => {},
  };
  

十一、Literal type

• 把變數能放入的值寫死
• 範例：以下 metric 變數只能是 'inch' 或 'cm' 這兩個值其中一個，editor 也會自動出現這兩個值給我們選
  

十二、Nullable type

• null 跟 undefined 都有自己的 type
• 在 tsconfig.js 裡面有一個 "strictNullChecks": true 雖然沒有打開，但它 enable by default，會阻擋把 null 帶入函式中，如果打開改成 false 就可以把 null 帶進去，但通常不太會這麼做
• 除了修改 config 檔案，我們也可以直接註釋 parameters 可以是 null 就不會跳錯了

  function log(something: string | null) {
    console.log(something);
  }
  
  log(null); // 因為上面註釋有寫可以是 null 就沒有跳錯 ✅
  

十三、Optional chaining ?.

有時我們無法確定某個變數是否「不是 null or undefined」，如果我們試著讀取該變數的 property, [index] 或是 call 它，如果它剛好是「null or undefined」程式執行就會出現 error，這時可以使用 ?. 做檢查，如果他不存在，就會直接回傳 undefined 而不是出現 error

// customer 有可能是 null/undefined 或 object
customer.birthday // 跳錯，過去在 JS 就是等跑程式碼時才知道有沒有 error
customer?.birthday // ✅ 使用 optional property access operator

// customers 有可能是 null/undefined 或 array
customers[0] // 跳錯
customers?.[0] // ✅ 使用 optional element access operator

// log 有可能是 null/undefined 或 funciton
log('a') // 跳錯
log?.('a') // ✅ 使用 optional call，log 是 function 才會 call，不然回傳 undefined

十四、還有其他這部影片未提及的..

ex. unknown, never...

• 目前透過其他學習資源得知把 never 註釋在 function 的回傳值代表這個 function 永遠不會「完整的結束」，會跑到某個地方就 throw error，也就不會有 return

🤔 疑惑

在寫 object 的註釋時，寫了裡面的 method，但它不會真的影響到「創建 method 的 code」，倒是會影響到「呼叫它的 code」，我暫時覺得有點不一致，但也有可能繼續往下學會有解答？因為得知目前的註釋寫法算是為「變數」寫的，還有寫在「function 本人」身上的，不知道看到這邊的大大們對這個疑惑有什麼看法？（以下為 code）

let employee: {
  readonly id: number;
  name: string;
  fn: (num: number) => void; // 1. annotation 寫在這
} = {
  id: 1,
  name: "Kim",
  fn: () => { // 3. 但這裡實則沒要求放入參數，連回傳值也並非 void
    return 2;
  },
};

employee.fn(1); // 2. 這邊會因為上面的 annotation 而要求我寫參數

• 補：後續再做測試，發現如果 1. 的 annotation 是寫 number, string... 之類的，在 3. 就會跳錯

以上，有任何想法或文內有誤、不清楚歡迎提出，謝謝大家 🙏🏻
.
筆者小記：覺得 TS 的型別推斷有夠聰明！然後 Mosh 一小時的課真的是很精實，作為 overview 還滿不錯的，筆者接著會持續透過其他資源學習，有機會再分享筆記上來交流～～～